<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="用户登录">
<meta http-equiv="refresh" content="120">
<meta name="author" content="House">
<style type="text/css">
body {background-color:steelblue;}
h1 {color: blanchedalmond;}
#div1,#div2 {width:610px;height:429px;padding:10px;border:10px solid #eb09d8;}
p {color:black;}
</style>
<title>用户登录</title>
<script>
function allowDrop(ev)
{
	ev.preventDefault();
}
function drag(ev)
{
	ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
	ev.preventDefault();
	var data=ev.dataTransfer.getData("Text");
	ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
    <h1 style="text-align: center;">用户登录</h1>
	<button type="button" onclick="alert('1.所有信息都必须要填\n2.写错的信息可以按“重置”\n3.填完信息后按“提交”')">登录注意事项</button>
	<form name="input" action="信息.html" method="get" style="text-align: center;">
		<fieldset>  <!-- <legend>标签为<fieldset>元素定义标题。-->
		<legend>用户个人信息</legend>
		姓氏: <input type="text" name="lastname"><br/>
		名字: <input type="text" name="firstname"><br/>
		邮箱: <input type="text" name="mail"><br/>
		用户名:<input list="users" name="user"><br/>
		<datalist id="users">
  			<option value="耗子🐀">
  			<option value="小王🤴">
			<option value="House🏠爸爸">
			<option value="House🏠妈妈">
		</datalist>
		密码:<input type="password" name="password"><br/>
		<br/><input type="submit" value="提交">
		<input type="reset" value="重置">
        <p>拖动(验证码)图片到矩形框中:</p>
        <div style="text-align: center;" id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"><img id="drag1" src="Pictures/验证码.jpg" draggable="true" ondragstart="drag(event)" width="610" height="429"></div>
        <div style="text-align: center;" id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
		</fieldset>
	</form>
</body>
</html>